<template>
	<coreshop-page title="门店列表" mode="left" bgColor="rgba(0,0,0,0)" :placeholder="false" :isShowStatusBarHeight="false">
		<view class="layout-store-box">
			<view class="map-box">
				<map style="width: 100%;height: 100%;" id="map" :scale="11" :enable-3D="true" :show-compass="true"
					:enable-overlooking="true" :enable-traffic="true" :latitude="state.latitude"
					:longitude="state.longitude" :markers="state.covers">
				</map>
			</view>
			<view class="store-box">
				<scroll-view class="store-list" enable-flex scroll-y>
					<view class="item-box" v-for="item in state.storeList" :key="item.id">
						<view class="img-box">
							<image class="img" :src="item.logoImage"></image>
						</view>
						<view class="msg-box">
							<view class="msg">
								<text class="lab">名称：</text>
								<text class="val">{{ item.storeName }}</text>
							</view>
							<view class="msg">
								<text class="lab">电话：</text>
								<text class="val">{{ item.mobile }}</text>
							</view>
							<view class="msg">
								<text class="lab">地址：</text>
								<text class="val">{{ item.address }}</text>
							</view>
						</view>
						<view class="distance-box">
							<view class="distance">{{ item.distanceStr }}</view>
							<uv-tags text="上图定位" @click="handleGoMarkers(item)" size="mini"></uv-tags>
							<!-- #ifdef MP-WEIXIN  -->
							<uv-tags text="地图导航" @click="handleGoShopMap(item)" size="mini" type="success"></uv-tags>
							<!-- #endif  -->
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</coreshop-page>
</template>
<script setup lang="ts">
	import { reactive } from 'vue';
	import { queryStoreList } from '@/core/api';
	import { onLoad } from '@dcloudio/uni-app';
	import { useShopConfigStore } from '@/core/store';
	import type { ShopConfigStoreType, Response, StoreListType } from '@/core/models';
	import { handleShowToast } from '@/core/utils';

	// 获取项目配置
	const shopConfigStore : ShopConfigStoreType = useShopConfigStore();

	const state = reactive<{
		storeList : Array<StoreListType>,
		longitude : number,
		latitude : number,
		covers : Array<{
			'longitude' ?: number,
			'latitude' ?: number,
			[key : string] : any,
		}>,
		page : number,
		limit : number,
	}>({
		storeList: [],
		longitude: 0,
		latitude: 0,
		covers: [],
		page: 1,
		limit: 30,
	});

	/** 获取自己的位置信息 */
	const getMyLocation = () => {
		// #ifdef MP-WEIXIN
		wx.getFuzzyLocation({
			type: 'wgs84',
			success(res : any) {
				state.longitude = res.longitude;
				state.latitude = res.latitude;
			},
			fail: function () {
				handleShowToast('获取您的经纬度坐标失败');
			},
			complete: function () {
				if (!state.longitude || !state.latitude) {
					state.longitude = 0;
					state.latitude = 0;
				}
				getStoreList();
			}
		})
		// #endif
		// #ifndef MP-WEIXIN
		uni.getLocation({
			type: 'wgs84',
			success: function (res : any) {
				state.longitude = res.longitude;
				state.latitude = res.latitude;
			},
			fail: function () {
				handleShowToast('获取您的经纬度坐标失败');
			},
			complete: function () {
				if (!state.longitude || !state.latitude) {
					state.longitude = 0;
					state.latitude = 0;
				}
				getStoreList();
			}
		});
		// #endif
	}

	onLoad(() => {
		getMyLocation();
	})

	const getStoreList = async () => {
		const storeList : Response<Array<StoreListType>> = await queryStoreList({
			'longitude': state.longitude,
			'latitude': state.latitude,
			'page': state.page,
			'limit': state.limit,
		});
		if (storeList.status) {
			if (storeList.data.length > 0) {
				state.storeList = storeList.data;
				state.longitude = Number(storeList.data[0].longitude);
				state.latitude = Number(storeList.data[0].latitude);
				storeList.data.forEach((item : any) => {
					state.covers.push({
						id: Number(item.id),
						latitude: Number(item.latitude),
						longitude: Number(item.longitude),
						iconPath: '/static/images/map/location.png',
						width: 15,
						height: 23,
					})
				})
			}
		} else {
			handleShowToast('门店信息获取失败');
		}
	}

	/** 地图导航 */
	const handleGoShopMap = (item : StoreListType) => {
		let plugin = requirePlugin('routePlan');

		// #ifdef MP-WEIXIN
		const txMapkey = shopConfigStore.config.qqMapKey; //使用在腾讯位置服务申请的key
		const referer = shopConfigStore.config.shopName; //调用插件的app的名称
		let endPoint = JSON.stringify({  //终点
			'name': item.address,
			'latitude': Number(item.latitude),
			'longitude': Number(item.longitude)
		});

		wx.navigateTo({
			url: 'plugin://routePlan/index?key=' + txMapkey + '&referer=' + referer + '&endPoint=' + endPoint

		});
		// #endif
	}

	/** 地图定位 */
	const handleGoMarkers = (item : StoreListType) => {
		state.longitude = Number(item.longitude);
		state.latitude = Number(item.latitude);
	}
</script>
<style lang="scss" scoped>
	@import './storeMap.scss';
</style>